<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
  <head>
  	<c:set value="${pageContext.request.contextPath}" var="basePath"></c:set>
	<jsp:include page="include/head.jsp"></jsp:include>
	<jsp:include page="include/js.jsp"></jsp:include>
  </head>
  <body>
  
  	<div class="modal fade" id="add-group-modal" role="dialog" aria-labelledby="add-group-modalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<form action="${basePath}/addSubjectVersion" method="POST">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">Add new subject version</h4>
					</div>
					<div class="modal-body">
						<fieldset>
							<div>
								<label>Subject:&nbsp;</label>
								<select name="subject_id">
									<c:forEach var="subject" items="${subjects}">
										<option value="${subject.id}">${subject.name}</option>
									</c:forEach>
								</select>
							</div>
							<div>
								<input type="text" class="form-control" placeholder="Version name" name="version_name"/>
							</div>
						</fieldset>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary" id="create-group-btn">Create</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					</div>
				</form>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
  
    <div id="login-data">
    	Session:&nbsp;<span id="user_name">${user.name} ${user.lastname}</span>
    	<a id="icon-signout" href="${basePath}/logout"><i class="icon-signout"></i></a>
    </div>
    
    <c:if test="${alert eq 'success'}">
	    <div class="alert alert-success alert-dismissable">
			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
			<strong>Success.</strong> The new Subject version has been successfully created. 
		</div>
	</c:if>
	
    <c:if test="${alert eq 'error'}">
	    <div class="alert alert-danger alert-dismissable">
			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
			<strong>Error.</strong> The Subject version could not be created.
		</div>
	</c:if>
    
    <div id="container" class="container">
        <div id="row" class="row panel">
            <legend>Select subject</legend>
            <div>  
            	<c:if test="${empty subjectVersions}">
            	Your subjects list is empty. This might be because you haven't been assigned to any subject yet or neither of your subjects uses Sketchpad.
            	</c:if>
                <ul id="subjectlist" class="panelList nav nav-pills nav-stacked">
	                <c:forEach var="subjectVersion" items="${subjectVersions}">
	               		<li data-id="${subjectVersion.id}" style="position: relative;">
				            <a href="#" class="subjectVersionA" data-id="${subjectVersion.id}">
				              <div>
				                <img class="pull-left img-rounded" style="margin-right:10px" src="${basePath}/resources/images/icons/subject.png">
				                <div>
				                  <strong>${subjectVersion.name}</strong>
				                  <br/>
				                  <small>&nbsp; </small>
				                </div>
				              </div>
				            </a>
				            <c:if test="${user.type eq 'teacher'}">
					            <span class="label label-default add-user-icon" data-id="${subjectVersion.id}">
					            	<img src="${basePath}/resources/images/icons/add-users.png">
					            </span>
					        </c:if>
				        </li> 	
	                </c:forEach>
                </ul>
            	<c:if test="${user.type eq 'teacher'}">
	            	<span class="btn" data-toggle="modal" data-target="#add-group-modal">
	            		<i class="icon-plus"></i>&nbsp;&nbsp;Add new subject version
	            	</span>
            	</c:if>
            </div>
        </div>
    </div>
    
    <script>
      $(function() {
          $(".subjectVersionA").click( function() {
              window.location = '${basePath}/activitySelection/' + $(this).data("id");
          });
          
          $('.add-user-icon').click( function() {
        	 window.location =  '${basePath}/registerSubjectVersionUsers/' + $(this).data('id');
          });
      });
    </script>
    
  </body>
</html>
